<template>
  <div class='thisPage'>
    <div class="pageTop">

      <div class="title">高级威胁发现与溯源取证实验平台</div>
    </div>
    <!--  <div class="navBox">
        <div ></div>
        <div ></div>
        <div class="navItem navItem1" @click="goToUrl('/tech-assess/overView')">技术测评</div>
        <div class="navItem navItem2" @click="goToUrl('/experimentExplo/views/experiment/overview/overviewIndex')">探索实验</div>
        <div class="navItem navItem3" @click="goToUrl('/exper/views/overview/overviewIndex')">教学演练</div>
        <div class="navItem navItem4" @click="goToUrl('/business/index')"></div>
        <div ></div>
        <div ></div>
      </div> -->
      <div class="chartBox">
        <Chart :id="'newAddChart'" :style="{width: '100%', height: '100%', marginTop: '-8px'}" :option="graphOption"/>
      </div>

    <!-- <ul class="dataTypes">
      <li v-for="(item, index) in dataTypes" :key="index" :class="`dataType dataTypeText${index}`">
        <div :class="`dot dataTypeDot${index}`"></div>
        {{item}}
        </li>
    </ul> -->
  </div>
</template>

<script>
// import moment from 'moment';

import Chart from "../../home/views/components/sygl/component/Chart";
import chartApi from "../../home/views/components/sygl/utils/chartApi";
var labelBorder = require('../../../../static/B1/B1Home/labelBorder.png')
export default {
  name: '',
  components: { Chart },
  props: {},
  data() {
    const symbolSize = [80, 80];
    const childLabelOptions = {
        textStyle: {
          fontSize: 18,
          fontWeight: 'normal'
        }
    }
    if(window.screen.width == 7680){
      return {
      
      // localTime: '',
      // dataTypes: ['互联网数据', '涉密网数据', '移动网数据', '车联网数据', '电磁空间数据', '卫星网数据'],
      datas: [
        {
          name: '威胁情报',
          // symbol: 'image://static/B1/B1home/sjhj.png',
          symbol: 'image://static/B1/B1home/sjhj.png',
          symbolSize: [250, 250],
          value: [200, 70],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '溯源取证',
          symbol: 'image://static/B1/B1home/wxsy.png',
          symbolSize: [250, 250],
          value: [370, 130],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        /* {
          // name: '发现溯源协同系统',
          symbol: 'image://static/B1/B1home/fxxt.png',
          symbolSize: [250, 250],
          value: [200, 150],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['10%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        }, */
        {
          name: '攻击检测',
          symbol: 'image://static/B1/B1home/wxjc.png',
          symbolSize: [250, 250],
          value: [30, 130],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '态势感知',
          symbol: 'image://static/B1/B1home/tsgz.png',
          symbolSize: [250, 250],
          value: [205, 220],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '多网域威胁数据接入',
          symbol: 'image://static/B1/B1home/mid.png',
          symbolSize: [600, 110],
          value: [200, 140],
          fixed: true,
          label: {
            fontSize: '20',
            position: ['30%', '10%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
         {
          name: '流水线式APT分析',
          symbol: '',
          symbolSize: [1, 1],
          value: [170, 130],
          fixed: true,
          label: {
            fontSize: '20',
            position: ['250px', '-30px'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '可编排的科研试验',
          symbol: '',
          symbolSize: [1, 1],
          value: [230, 130],
          fixed: true,
          label: {
            fontSize: '20',
            position: ['-400px', '-30px'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '技术测评',
          symbol: 'image://static/B1/B1home/top-1.png',
          symbolSize: [100, 100],
          value: [90, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '探索实验',
          symbol: 'image://static/B1/B1home/top-2.png',
          symbolSize: [100, 100],
          value: [160, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '教学演练',
          symbol: 'image://static/B1/B1home/top-3.png',
          symbolSize: [100, 100],
          value: [230, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '业务应用',
          symbol: 'image://static/B1/B1home/top-3.png',
          symbolSize: [100, 100],
          value: [310, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        // 态势感知部分
        {
          name: '外部威胁态势感知',
          symbol: 'image://static/B1/B1home/wbwx.png',
          symbolSize: symbolSize,
          value: [105, 210],
          fixed: true,
          label: {
            position: 'top',
            // position: ['-50%', '-20%'],
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '保护目标态势分析',
          symbol: 'image://static/B1/B1home/tsfx.png',
          symbolSize: symbolSize,
          value: [140, 190],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '安全态势预警',
          symbol: 'image://static/B1/B1home/tsyj.png',
          symbolSize: symbolSize,
          value: [160, 230],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '外部威胁刻画',
          symbol: 'image://static/B1/B1home/wxkh.png',
          symbolSize: symbolSize,
          value: [300, 210],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '态势感知可视化',
          symbol: 'image://static/B1/B1home/ksh.png',
          symbolSize: symbolSize,
          value: [260, 190],
          fixed: true,
          label: {
            position: ['-10%', 0],
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '保护目标刻画',
          symbol: 'image://static/B1/B1home/mbkh.png',
          symbolSize: symbolSize,
          value: [250, 230],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        // 发现溯源协同系统 200 130
        /* {
          name: '协同分析',
          symbol: 'image://static/B1/B1home/xtfx.png',
          symbolSize: [100, 100],
          value: [130, 140],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '资源调度',
          symbol: 'image://static/B1/B1home/zydd.png',
          symbolSize: [100, 100],
          value: [150, 170],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '预警研判',
          symbol: 'image://static/B1/B1home/yjyp.png',
          symbolSize: [100, 100],
          value: [270, 140],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '智能决策',
          symbol: 'image://static/B1/B1home/znjc.png',
          symbolSize: [100, 100],
          value: [250, 170],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        }, */
        // 威胁发现 50, 150
        {
          name: '攻击事件研判',
          symbol: 'image://static/B1/B1home/sjyp.png',
          symbolSize: [80, 80],
          value: [5, 110],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '跨网攻击分析',
          symbol: 'image://static/B1/B1home/gjfx.png',
          symbolSize: [80, 80],
          symbolOffset: [-90, 0],
          value: [0, 140],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '安全日志挖掘',
          symbol: 'image://static/B1/B1home/rzwj.png',
          symbolSize: [80, 80],
          symbolOffset: [-120, 0],
          value: [0, 180],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '恶意代码分析',
          symbol: 'image://static/B1/B1home/dmfx.png',
          symbolSize: [80, 80],
          value: [10, 210],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '攻击流量检测',
          symbol: 'image://static/B1/B1home/lljc.png',
          symbolSize: [80, 80],
          value: [50, 200],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        // 溯源取证 350, 150   50, 150
        {
          name: '影响评估',
          symbol: 'image://static/B1/B1home/yxpg.png',
          symbolSize: [80, 80],
          value: [400, 110],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '场景还原',
          symbol: 'image://static/B1/B1home/cjhy.png',
          symbolSize: [80, 80],
          symbolOffset: [90, 0],
          value: [400, 135],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '追踪溯源',
          symbol: 'image://static/B1/B1home/zzsy.png',
          symbolSize: [80, 80],
          symbolOffset: [100, 0],
          value: [400, 180],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '网络远程核查',
          symbol: 'image://static/B1/B1home/ychc.png',
          symbolSize: [80, 80],
          value: [390, 210],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '现场核查取证',
          symbol: 'image://static/B1/B1home/hcqz.png',
          symbolSize: [80, 80],
          value: [350, 200],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        // 数据聚合 200, 30

        // 数据聚合 200, 30
        {
          name: '多网域安全数据接入',
          symbol: 'image://static/B1/B1home/sjjh-dwy.png',
          symbolSize: symbolSize,
          value: [100, 70],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '跨网域数据融合',
          symbol: 'image://static/B1/B1home/sjjh-kwy.png',
          symbolSize: symbolSize,
          value: [150, 50],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '威胁情报挖掘',
          symbol: 'image://static/B1/B1home/sjjh-wx.png',
          symbolSize: symbolSize,
          value: [260, 50],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '威胁信息共享',
          symbol: 'image://static/B1/B1home/sjjh-info.png',
          symbolSize: symbolSize,
          value: [300, 70],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },

        {
          name: '互联网数据',
          symbol: 'image://static/B1/B1home/hlw.png',
          symbolSize: [180, 70],
          symbolOffset: [60, 0],
          value: [0, 5],
          fixed: true,
          label: {
            position: ['38%', '40%'],
           /* textShadowColor: '#15FFA4',
            textShadowBlur: 8,*/
          }
        },
        {
          name: '涉密网数据',
          symbol: 'image://static/B1/B1home/smw.png',
          symbolSize: [180, 70],
          value: [70, 5],
          fixed: true,
          label: {
            position: ['38%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '移动网数据',
          symbol: 'image://static/B1/B1home/ydw.png',
          symbolSize: [180, 70],
          value: [140, 5],
          fixed: true,
          label: {
            position: ['38%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '车联网数据',
          symbol: 'image://static/B1/B1home/clw.png',
          symbolSize: [180, 70],
          value: [260, 5],
          fixed: true,
          label: {
            position: ['10%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '电磁空间数据',
          symbol: 'image://static/B1/B1home/dckj.png',
          symbolSize: [180, 70],
          value: [320, 5],
          fixed: true,
          label: {
            position: ['5%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '卫星网数据',
          symbol: 'image://static/B1/B1home/wxw.png',
          symbolSize: [180, 70],
          symbolOffset: [120, 0],
          value: [360, 5],
          fixed: true,
          label: {
            position: ['10%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
      ],
      links: [
        /* {
          source: '数据聚合',
          target: '溯源取证',
          symbol: ['none', 'circle']
        }, */
        {
          source: '数据聚合',
          target: '发现溯源协同系统',
          symbol: ['none', 'circle'],

        },
        /* {
          source: '数据聚合',
          target: '威胁发现',
          symbol: ['none', 'circle']
        }, */
        {
          source: '发现溯源协同系统',
          target: '态势感知',
          value: '态势数据协同指令',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        },{
          source: '威胁发现',
          target: '协同分析',
          value: '威胁分析结构协同指令',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        },{
          source: '预警研判',
          target: '溯源取证',
          value: '溯源结果协同指令',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        }/* ,{
          source: '跨网域数据融合',
          target: '攻击检测',
          symbol: ['none', 'circle'],
          value: '多域多模态安全数据高价值情报数据',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        },{
          source: '威胁情报挖掘',
          target: '溯源取证',
          symbol: ['none', 'circle'],
          value: '多域多模态安全数据高价值情报数据',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        } */

      ],
      coordsData: [
        /* {
          coords: [
            [200, 30],
            [350, 140],
          ]
        }, {
          coords: [
            [200, 30],
            [200, 150]
          ]
        },{
          coords: [
            [200, 30],
            [50, 140]
          ]
        },{
          coords: [
            [200, 150],
            [200, 260]
          ]
        }, */{
          coords: [
            [50, 160],
            [130, 140]
          ]
        }
      ]
    }
    }else{
      return {
      
      // localTime: '',
      // dataTypes: ['互联网数据', '涉密网数据', '移动网数据', '车联网数据', '电磁空间数据', '卫星网数据'],
      datas: [
        {
          name: '威胁情报',
          // symbol: 'image://static/B1/B1home/sjhj.png',
          symbol: 'image://static/B1/B1home/sjhj.png',
          symbolSize: [250, 250],
          value: [200, 70],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '溯源取证',
          symbol: 'image://static/B1/B1home/wxsy.png',
          symbolSize: [250, 250],
          value: [370, 130],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        /* {
          // name: '发现溯源协同系统',
          symbol: 'image://static/B1/B1home/fxxt.png',
          symbolSize: [250, 250],
          value: [200, 150],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['10%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        }, */
        {
          name: '攻击检测',
          symbol: 'image://static/B1/B1home/wxjc.png',
          symbolSize: [250, 250],
          value: [30, 130],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '态势感知',
          symbol: 'image://static/B1/B1home/tsgz.png',
          symbolSize: [250, 250],
          value: [205, 220],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['30%', '70%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '多网域威胁数据接入',
          symbol: 'image://static/B1/B1home/mid.png',
          symbolSize: [600, 110],
          value: [200, 140],
          fixed: true,
          label: {
            fontSize: '20',
            position: ['30%', '10%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '流水线式APT分析',
          symbol: '',
          symbolSize: [1, 1],
          value: [170, 130],
          fixed: true,
          label: {
            fontSize: '20',
            // position: ['-100%', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '可编排的科研试验',
          symbol: '',
          symbolSize: [1, 1],
          value: [230, 130],
          fixed: true,
          label: {
            fontSize: '20',
            // position: ['-100%', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '技术测评',
          symbol: 'image://static/B1/B1home/top-1.png',
          symbolSize: [100, 100],
          value: [90, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '探索实验',
          symbol: 'image://static/B1/B1home/top-2.png',
          symbolSize: [100, 100],
          value: [160, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '教学演练',
          symbol: 'image://static/B1/B1home/top-3.png',
          symbolSize: [100, 100],
          value: [230, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        {
          name: '业务应用',
          symbol: 'image://static/B1/B1home/top-3.png',
          symbolSize: [100, 100],
          value: [310, 295],
          fixed: true,
          label: {
            fontSize: '25',
            position: ['0', '80%'],
            textShadowColor: '#06EBF9',
            textShadowBlur: 10,
          },
        },
        // 态势感知部分
        {
          name: '外部威胁态势感知',
          symbol: 'image://static/B1/B1home/wbwx.png',
          symbolSize: symbolSize,
          value: [105, 210],
          fixed: true,
          label: {
            position: 'top',
            // position: ['-50%', '-20%'],
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '保护目标态势分析',
          symbol: 'image://static/B1/B1home/tsfx.png',
          symbolSize: symbolSize,
          value: [140, 190],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '安全态势预警',
          symbol: 'image://static/B1/B1home/tsyj.png',
          symbolSize: symbolSize,
          value: [160, 230],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '外部威胁刻画',
          symbol: 'image://static/B1/B1home/wxkh.png',
          symbolSize: symbolSize,
          value: [300, 210],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '态势感知可视化',
          symbol: 'image://static/B1/B1home/ksh.png',
          symbolSize: symbolSize,
          value: [260, 190],
          fixed: true,
          label: {
            position: ['-10%', 0],
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '保护目标刻画',
          symbol: 'image://static/B1/B1home/mbkh.png',
          symbolSize: symbolSize,
          value: [250, 230],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: '#5b9dff',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        // 发现溯源协同系统 200 130
        /* {
          name: '协同分析',
          symbol: 'image://static/B1/B1home/xtfx.png',
          symbolSize: [100, 100],
          value: [130, 140],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '资源调度',
          symbol: 'image://static/B1/B1home/zydd.png',
          symbolSize: [100, 100],
          value: [150, 170],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '预警研判',
          symbol: 'image://static/B1/B1home/yjyp.png',
          symbolSize: [100, 100],
          value: [270, 140],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '智能决策',
          symbol: 'image://static/B1/B1home/znjc.png',
          symbolSize: [100, 100],
          value: [250, 170],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(195, 176, 26, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        }, */
        // 威胁发现 50, 150
        {
          name: '攻击事件研判',
          symbol: 'image://static/B1/B1home/sjyp.png',
          symbolSize: [80, 80],
          value: [5, 110],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '跨网攻击分析',
          symbol: 'image://static/B1/B1home/gjfx.png',
          symbolSize: [80, 80],
          symbolOffset: [-90, 0],
          value: [0, 140],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '安全日志挖掘',
          symbol: 'image://static/B1/B1home/rzwj.png',
          symbolSize: [80, 80],
          symbolOffset: [-120, 0],
          value: [0, 180],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '恶意代码分析',
          symbol: 'image://static/B1/B1home/dmfx.png',
          symbolSize: [80, 80],
          value: [10, 210],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '攻击流量检测',
          symbol: 'image://static/B1/B1home/lljc.png',
          symbolSize: [80, 80],
          value: [50, 200],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        // 溯源取证 350, 150   50, 150
        {
          name: '影响评估',
          symbol: 'image://static/B1/B1home/yxpg.png',
          symbolSize: [80, 80],
          value: [400, 110],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '场景还原',
          symbol: 'image://static/B1/B1home/cjhy.png',
          symbolSize: [80, 80],
          symbolOffset: [90, 0],
          value: [400, 135],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '追踪溯源',
          symbol: 'image://static/B1/B1home/zzsy.png',
          symbolSize: [80, 80],
          symbolOffset: [100, 0],
          value: [400, 180],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '网络远程核查',
          symbol: 'image://static/B1/B1home/ychc.png',
          symbolSize: [80, 80],
          value: [390, 210],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '现场核查取证',
          symbol: 'image://static/B1/B1home/hcqz.png',
          symbolSize: [80, 80],
          value: [350, 200],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        // 数据聚合 200, 30

        // 数据聚合 200, 30
        {
          name: '多网域安全数据接入',
          symbol: 'image://static/B1/B1home/sjjh-dwy.png',
          symbolSize: symbolSize,
          value: [100, 70],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '跨网域数据融合',
          symbol: 'image://static/B1/B1home/sjjh-kwy.png',
          symbolSize: symbolSize,
          value: [150, 50],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '威胁情报挖掘',
          symbol: 'image://static/B1/B1home/sjjh-wx.png',
          symbolSize: symbolSize,
          value: [260, 50],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },
        {
          name: '威胁信息共享',
          symbol: 'image://static/B1/B1home/sjjh-info.png',
          symbolSize: symbolSize,
          value: [300, 70],
          fixed: true,
          label: {
            position: 'top',
            padding: 10,
            textShadowColor: 'rgba(5, 237, 251, 0.8)',
            textShadowBlur: 4,
            backgroundColor: {
                image: labelBorder,
                repeat: 'no-repeat',
            },
            ...childLabelOptions
          }
        },

        {
          name: '互联网数据',
          symbol: 'image://static/B1/B1home/hlw.png',
          symbolSize: [180, 70],
          symbolOffset: [60, 0],
          value: [0, 5],
          fixed: true,
          label: {
            position: ['38%', '40%'],
           /* textShadowColor: '#15FFA4',
            textShadowBlur: 8,*/
          }
        },
        {
          name: '涉密网数据',
          symbol: 'image://static/B1/B1home/smw.png',
          symbolSize: [180, 70],
          value: [70, 5],
          fixed: true,
          label: {
            position: ['38%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '移动网数据',
          symbol: 'image://static/B1/B1home/ydw.png',
          symbolSize: [180, 70],
          value: [140, 5],
          fixed: true,
          label: {
            position: ['38%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '车联网数据',
          symbol: 'image://static/B1/B1home/clw.png',
          symbolSize: [180, 70],
          value: [260, 5],
          fixed: true,
          label: {
            position: ['10%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '电磁空间数据',
          symbol: 'image://static/B1/B1home/dckj.png',
          symbolSize: [180, 70],
          value: [320, 5],
          fixed: true,
          label: {
            position: ['5%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
        {
          name: '卫星网数据',
          symbol: 'image://static/B1/B1home/wxw.png',
          symbolSize: [180, 70],
          symbolOffset: [120, 0],
          value: [360, 5],
          fixed: true,
          label: {
            position: ['10%', '40%'],
            // textShadowColor: '#15FFA4',
            // textShadowBlur: 8,
          }
        },
      ],
      links: [
        /* {
          source: '数据聚合',
          target: '溯源取证',
          symbol: ['none', 'circle']
        }, */
        {
          source: '数据聚合',
          target: '发现溯源协同系统',
          symbol: ['none', 'circle'],

        },
        /* {
          source: '数据聚合',
          target: '威胁发现',
          symbol: ['none', 'circle']
        }, */
        {
          source: '发现溯源协同系统',
          target: '态势感知',
          value: '态势数据协同指令',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        },{
          source: '威胁发现',
          target: '协同分析',
          value: '威胁分析结构协同指令',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        },{
          source: '预警研判',
          target: '溯源取证',
          value: '溯源结果协同指令',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        }/* ,{
          source: '跨网域数据融合',
          target: '攻击检测',
          symbol: ['none', 'circle'],
          value: '多域多模态安全数据高价值情报数据',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        },{
          source: '威胁情报挖掘',
          target: '溯源取证',
          symbol: ['none', 'circle'],
          value: '多域多模态安全数据高价值情报数据',
          label: {
            show: true,
            formatter: (params) => {
              return params.value
            }
          }
        } */

      ],
      coordsData: [
        /* {
          coords: [
            [200, 30],
            [350, 140],
          ]
        }, {
          coords: [
            [200, 30],
            [200, 150]
          ]
        },{
          coords: [
            [200, 30],
            [50, 140]
          ]
        },{
          coords: [
            [200, 150],
            [200, 260]
          ]
        }, */{
          coords: [
            [50, 160],
            [130, 140]
          ]
        }
      ]
    }
    }
    
  },
  computed: {
    graphOption() {
      return chartApi.getGraphChart(this.datas, this.links, this.coordsData)
    }
  },
  methods: {
    goToUrl(params){
      this.$router.push(params)
    }
  },
  mounted() {
    // 更新时间
    /* this.getSecondsTimer = setInterval(()=>{
      this.localTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
    },1000); */
  },
  created() {},
  beforeDestroy() {
    // clearInterval(this.getSecondsTimer);
  },
}
</script>

<style scoped lang="less">
.thisPage{
  height: 100%;
  width: 100%;
  background: url(/static/B1/B1home/b1bg.png);
  background-size: 100% 100%;
  .pageTop{
    height: 8%;
    background: url(/static/B1/B1home/titlebg.png);
    background-size: 310% 100%;
    background-position-x: 50%;
    .title{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .px2font(36);
      color: #fff;
    }
    .timeBox{
      color: #fff;
      position: absolute;
      right: 0;
      // top: -5%;
    }
  }
  .chartBox{
    height: 92%;
  }
  .dataTypes{
    position: absolute;
    bottom: 0.5%;
    display: flex;
    justify-content: space-around;
    width: 50%;
    .dataType{
      color: rgba(255, 255, 255, 0.4);
      .px2font(18);
      .dot{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
      }
      .dataTypeDot0{
        background: #fff;
      }
    }
    .dataTypeText0{
      color: #fff;
    }
  }
  .pageBottom{
    position: relative;
  }
  .navBox{
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    font-size: 20px;
    color: rgb(21, 255, 164);
    z-index: 0;
    position: absolute;
    pointer-events: auto;
    z-index: 999;
    .navItem{
      // flex: 1;
      width: 200px;
      text-align: center;
      height: 160px;
      line-height: 160px;
      cursor: pointer;
    }
    .navItem1{
      background: url('/static/B1/B1home/top-1.png') no-repeat 0 0;
      background-size: 80% 80%;
    }
    .navItem2{
      background: url('/static/B1/B1home/top-2.png') no-repeat 0 0;
      background-size: 80% 80%;
    }
    .navItem3{
      background: url('/static/B1/B1home/top-3.png') no-repeat  0 0;
      background-size: 80% 80%;
    }
    .navItem4{
      background: url('/static/B1/B1home/top-4.png') no-repeat 0 0;
      background-size: 80% 80%;
    }
  }
}
</style>
